<template>
	<div class="calender2">
		<div class="date-header">
			<div class="pre-month" @click="prevMonth"></div>
			<div class="show-date">{{year}}年{{month}}月{{day}}日</div>
			<div class="next-month" @click="nextMonth"></div>
		</div>
		<div class="date-content">
			<div class="week-header">
				<div v-for="item in ['日','一','二','三','四','五','六']" :key=item>{{ item }}</div>
			</div>
			<div class="week-day">
				<div class="every-day" v-for="item in 42" :key="item">
					<div @click="restBck(item - beginDsys)" v-if="item - beginDsys > 0 && item - endays - beginDsys  <= 0"  :class="{nowDay:`${year}-${month}-${item - beginDsys}` == typeDay,activeDay:`${year}-${month}-${item - beginDsys}` == restDay }">{{ item - beginDsys }}</div>
					<div class="other-day" v-else-if="item - beginDsys <= 0">{{ item - beginDsys + prevDay}}</div>
					<div class="other-day" v-else>{{ item - beginDsys - endays }}</div>
				</div>
			</div>
		</div>
	</div>
</template>


<script>

	export default {
		data() {
			return {
				year: null,
				month: null,
				day: null,
				beginDsys: null,
				curDate: null,
				endays: null,
				prevDay: null,
				nextDay: null,
				showType: false,
				typeDay: null,
				restDay:null
			}
		},
		created() {
			this.getInitDate();
			this.beginDay()
		},
		methods: {

			getInitDate() {
				const date = new Date();
				this.year = date.getFullYear();
				this.month = date.getUTCMonth() + 1;
				this.day = date.getDate();
			},

			beginDay() {	//返回这个月的第一天对应的周次
				let nowDay = new Date()
				this.beginDsys = new Date(this.year, this.month - 1, 1).getDay()
				this.endays = new Date(this.year, this.month - 1, 0).getDate()
				this.prevDay = new Date(this.year, this.month - 2, 0).getDate()
				this.nextDay = new Date(this.year, this.month - 2, 0).getDate()
				this.typeDay = `${nowDay.getFullYear()}-${nowDay.getMonth() + 1}-${nowDay.getDate()}`
				console.log(this.typeDay, "this.typeDay");
			},

			prevMonth() {
				const date = new Date();
				this.month = this.month - 1
				if (this.month <= 0) {
					this.year = this.year - 1;
					this.month = 12
					this.beginDay()
				} else {
					this.beginDay()
				}
				this.day = date.getDate();
			},

			nextMonth() {
				const date = new Date();
				this.month = this.month + 1
				if (this.month > 12) {
					this.year = this.year + 1;
					this.month = 1
					this.beginDay()
				} else {
					this.beginDay()
				}
				this.day = date.getDate();
			},

			restBck(getday){

				// if (getday) {
					
				// } else {
					
				// }
				this.restDay = `${this.year}-${this.month}-${getday}`
				console.log(this.restDay,"restDay");
			}
		},

	}

</script>

<style>
	* {
		margin: 0px;
		border: 0px;
		list-style: none;
	}

	.calender2 {
		margin: 0 auto;
		height: auto;
		width: 420px;
		border: 1px solid #ccc;
	}

	.date-header {
		margin-left: 10px;
		height: 40px;
		width: 350px;
		line-height: 40px;
		text-align: center;
	}

	.pre-month {
		position: absolute;
		display: inline-block;
		height: 0px;
		width: 0px;
		border: 20px solid;
		border-color: transparent rgb(35, 137, 206) transparent transparent;
	}

	.next-month {
		position: absolute;
		display: inline-block;
		height: 0px;
		width: 0px;
		border: 20px solid;
		border-color: transparent transparent transparent rgb(35, 137, 206);
	}

	.show-date {
		margin-left: 40px;
		margin-top: 0px;
		display: inline-block;
		line-height: 40px;
		text-align: center;
		width: 310px;
		color: rgb(35, 137, 206);
	}

	.week-header {
		background: rgb(35, 137, 206);
		color: #fff;
		font-size: 14px;
		text-align: center;
		line-height: 20px;
	}

	.week-header div {
		margin: 0;
		padding: 0;
		display: inline-block;
		height: 20px;
		width: 60px;
	}

	.every-day {
		display: inline-block;
		height: 50px;
		width: 60px;
		text-align: center;
		line-height: 50px;
	}

	.other-day {
		color: #ccc;
	}

	.nowDay {
		background: rgb(35, 137, 206);
	}

	.activeDay {
		background: #F56C6C;
	}
</style>